<template>
  <div class="payment">
    <div class="head">
      <van-nav-bar
        title="缴费系统"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="classfiy">
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" />
      <van-row type="flex" class="electric">
        <van-col span="8" >
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconfont-shuidianjiaofei"></use>
          </svg>
          <font size= "5px">电费</font>
        </van-col>
        <van-col span="10" offset="4" >
          <font size= "5px">总计{{dian}}</font>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconfont-renminbi"></use>
          </svg>
        </van-col>
      </van-row>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" />
       <van-row  type="flex" class="water">
        <van-col span="8" >
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconfont-ziyuan"></use>
          </svg>
          <font size= "5px">水费</font>
        </van-col>
        <van-col span="10" offset="4" >
          <font size= "5px">总计{{shui}}</font>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconfont-renminbi"></use>
          </svg></van-col>
      </van-row>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" />
       <van-row  type="center" class="management">
        <van-col span="8" >
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconfont-A"></use>
          </svg>
          <font size= "5px">管理费</font>
        </van-col>
        <van-col span="10" offset="4" >
          <font size= "5px">总计{{guanli}}</font>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconfont-renminbi"></use>
          </svg></van-col>
      </van-row>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" />
    </div>
    <div class="all">
      <van-submit-bar :price="dian*100 + shui*100 + guanli*100" button-text="缴费" @submit="onSubmit">
        <template #tip>
          您目前所选的地址为海华苑七栋A406, <span @click="onClickEditAddress">修改地址</span>
        </template>
      </van-submit-bar>
      <van-popup v-model="show" position="bottom" :style="{ width: '100%', height: '60%' }">
        <van-password-input
          :value="value"
          :error-info="errorInfo"
          :show="showKeyboard1"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
        <!-- 数字键盘 -->
        <van-number-keyboard
          v-model="value"
          :show="showKeyboard"
          @blur="showKeyboard = false"
        />
      </van-popup>
      <van-popup v-model="show1" :style="{ width: '20%', height: '10%' }">
        <van-loading size="50px" />
      </van-popup>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, SubmitBar, checkbox, Col, Row, Divider, PasswordInput, NumberKeyboard, Popup, Loading, Toast } from 'vant'
Vue.use(NavBar).use(SubmitBar).use(checkbox).use(Col).use(Row).use(Divider).use(PasswordInput).use(NumberKeyboard).use(Popup).use(Loading).use(Toast)
export default{
  name: 'Payment',
  data () {
    return {
      checked: true,
      value: '',
      errorInfo: '',
      show: false,
      show1: false,
      showKeyboard: false,
      showKeyboard1: false,
      price: 0,
      dian: 2020,
      shui: 2020,
      guanli: 2020
    }
  },
  methods: {
    // 返回首页
    onClickLeft () {
      this.$router.push('/Home')
    },
    // 修改地址
    onClickEditAddress () {
    },
    // 缴费
    onSubmit () {
      this.show = true
      this.showKeyboard1 = true
      this.showKeyboard = true
      this.value = ''
      this.errorInfo = ''
    }
  },
  watch: {
    value (value) {
      if (value.length === 6 && value !== '123456') {
        this.errorInfo = '密码错误'
        this.value = ''
      } else if (value.length === 6 && value === '123456') {
        this.show = false
        this.show1 = true
        setTimeout(() => {
          this.show1 = false
          this.dian = 0
          this.guanli = 0
          this.shui = 0
          Toast.success('支付成功')
        }, 2000)
      } else if (value.length === 1 && this.errorInfo === '密码错误') {
        this.errorInfo = ''
      }
    }
  }
}
</script>

<style scoped>
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
